<template>
  <uv-sticky
    :bg-color="bgColor"
    :disabled="disabled"
    :offset-top="offsetTop"
    :custom-nav-height="customNavHeight"
  >
    <uv-status-bar v-if="statusBar && scrollTop >= iStatusBarHeight" />
    <uv-tabs
      :list="tabs"
      :current="current"
      :key-name="keyName"
      :duration="duration"
      :scrollable="scroll"
      :line-color="lineColor"
      :line-width="lineWidth"
      :line-height="lineHeight"
      :active-style="activeStyle"
      :inactive-style="inactiveStyle"
      @click="click"
      @change="change"
    >
    <template #right>
      <slot name="right" />
		</template>
    </uv-tabs>
  </uv-sticky>
</template>
<script setup>
import { ref, watch } from "vue";
import { onPageScroll } from "@dcloudio/uni-app";
const props = defineProps({
  /**
   * tab数据
   * @label 名称
   */
  tabs: {
    type: Array,
    default: () => [],
  },
  // 选中的tab
  active: {
    type: [String, Number],
    default: "",
  },
  // 选中样式
  activeStyle: {
    type: Object,
    default: () => {
      return {
        color: "#212121",
        fontSize: "14px",
      };
    },
  },
  // 非选中样式
  inactiveStyle: {
    type: Object,
    default: () => {
      return {
        color: "#BDBDBD",
        fontSize: "14px",
      };
    },
  },
  // 吸顶距离
  offsetTop: {
    type: [String, Number],
    default: 0,
  },
  // 自定义导航栏高度
  customNavHeight: {
    type: [String, Number],
    default: 0,
  },
  // 是否需要状态栏
  statusBar: {
    type: Boolean,
    default: false,
  },
  // 背景颜色
  bgColor: {
    type: String,
    default: "#FFFFFF",
  },
  // 禁用吸顶
  disabled: {
    type: Boolean,
    default: false,
  },
  // 滑块过渡时间ms
  duration: {
    type: Number,
    default: 300,
  },
  // 是否可滚动
  scroll: {
    type: Boolean,
    default: true,
  },
  // 滑块颜色
  lineColor: {
    type: String,
    default: "#4EA770",
  },
  // 滑块高度
  lineWidth: {
    type: [String, Number],
    default: 35,
  },
  // 滑块高度
  lineHeight: {
    type: [String, Number],
    default: 4,
  },
  // list元素中读取键名
  keyName: {
    type: String,
    default: "label",
  },
  // list元素中读取键名
  keyValue: {
    type: String,
    default: "type",
  },
});
const emit = defineEmits(["change", "click"]);

const iStatusBarHeight = ref(0);
const scrollTop = ref(0);
const current = ref(); // 选中的tab

watch(props, () => {
  setTimeout(() => {
    if (typeof props.active === "number") {
      current.value = props.active;
    } else {
      current.value = props.tabs.findIndex(
        (item) => item[props.keyValue] === props.active
      );
    }
    if (props.statusBar) {
      iStatusBarHeight.value = uni.getSystemInfoSync().statusBarHeight + 44;
    } else {
      iStatusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
    }
    if (props.customNavHeight) {
      iStatusBarHeight.value = iStatusBarHeight.value + props.customNavHeight;
    }
  }, 0);
});

onPageScroll((e) => {
  scrollTop.value = Math.floor(e.scrollTop);
});

// 点击菜单
const click = (e) => {
  emit("click", e);
};

// 切换菜单
const change = (e) => {
  let direction = current.value > e.index;
  current.value = e.index;
  emit("change", { ...e, direction: direction ? "right" : "left" });
};
</script>
<style lang="scss" scoped></style>
